<script setup>
import {CommonUtils} from 'great-jsutils';
</script>
<template>
<h2>deom07-for02</h2>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">数组变更方法</div>
    <div  class="zhtt-demo-card-body">
      <ul>
        <li class="li-inline" v-for="item in items">{{item.message}}</li>
      </ul>
      <button class="zhtt-btn" @click="pushTest()">push()</button>
      <button class="zhtt-btn" @click="popTest()">pop()</button>
      <button class="zhtt-btn" @click="shiftTest()">shift()</button>
      <button class="zhtt-btn" @click="unshiftTest()">unshift()</button>
      <button class="zhtt-btn" @click="spliceTest()">splice()</button>
      <button class="zhtt-btn" @click="spliceTest2()">splice(value)</button>
      <button class="zhtt-btn" @click="sortTest()">sort()?</button>
      <button class="zhtt-btn" @click="reverseTest()">reverse()</button>
    </div>
    <div class="zhtt-demo-card-footer">

    </div>
  </div>

  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">数组替换方法</div>
    <div  class="zhtt-demo-card-body">

      <button class="zhtt-btn" @click="filterTest()">filter()</button>
      <button class="zhtt-btn" @click="reverseTest()">concat()?</button>
      <button class="zhtt-btn" @click="reverseTest()">slice()?</button>
    </div>
    <div class="zhtt-demo-card-footer"> </div>
  </div>

  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">通过计算过滤数据</div>
    <div  class="zhtt-demo-card-body">
      <p>
        关键字：<input type="text" class="zhtt-input" v-model="keyword" placeholder="输入关键字，过滤结果">
      </p>
      <ul>
        <li class="li" v-for="item in itemResult" :key="item.id">
          {{item.message}}
          <span style="color:#a2a2a2;">({{item.id}})</span>
        </li>
      </ul>
    </div>
    <div class="zhtt-demo-card-footer">:key="item.id" 这个是为了便于跟踪每个节点的属性</div>
  </div>

</template>

<script>
export default {
  name: "deom07-for01",
  beforeCreate() {
    console.log('beforeCreate');
  },
  data(){
    return {
      keyword:'',
      myObject: {
        'title': 'How to do lists in Vue',
        'author': 'Jane Doe',
        'publishedAt': '2016-04-10'
      },
      items: [
        { message: 'Foo',id:CommonUtils.uuid() },
        { message: 'Aaa',id:CommonUtils.uuid() },
        { message: 'HTTP',id:CommonUtils.uuid() },
        { message: 'FTP',id:CommonUtils.uuid() },
        { message: 'UDP',id:CommonUtils.uuid() },
        { message: 'DSA',id:CommonUtils.uuid() },
        { message: 'Bar',id:CommonUtils.uuid() }
      ]
    }
  },
  methods:{
    pushTest(){
      this.items.push({message:'msg'+this.items.length});
    },
    popTest(){
      this.items.pop();
    },
    shiftTest(){
      this.items.shift();
    },
    unshiftTest(){
      this.items.unshift({message:'msg'+this.items.length});
    },
    spliceTest(){
      this.items.splice(0,1);
    },
    spliceTest2(){
      this.items.splice(0,1,{message:'msg'+this.items.length});
    },
    sortTest(){
      this.items.sort(function(v1,v2){
        return v1.message>v2.message;
      });
    },
    reverseTest(){
      this.items.reverse();
    },

    filterTest(){
      this.items = this.items.filter(v => v.message.match(/.*A.*/));
    }
  },
  computed:{
    itemResult(){
      return this.items.filter(v => v.message.indexOf(this.keyword)>-1);
    }
  }
}
</script>
<style scoped>
ul{
  margin:12px;
}
.li{
  list-style: none;
}
.li-inline{display: inline-block;padding-right:10px;}
</style>